<!--
 * @Descripttion: 富文本组件
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-17 14:01:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-20 10:24:30
-->
<template>
  <div>richText</div>
  <div class="select-button">
    <span>

    </span>
    <button @click="getSelectedText">B</button>
    <button>U</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>T9</button>
    <button>T12</button>
    <button>T14</button>
    <button>T16</button>
    <button>T18</button>
    <span>
      
    </span>
  </div>
  <div>
    <textarea id="textarea" cols="100" rows="10">
      就哈哈猴猴vodi布局把握飞飞去吃碗切换堆场都会清楚
    </textarea>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  setup() {
    const list = reactive(['1', '2', '3', '4'])

    const method = reactive({
      getSelectedText() {
        const ele: any = document.getElementById('textarea')
        const startPosition = ele.selectionStart
        const endPosition = ele.selectionEnd
        if (startPosition !== endPosition) {
          console.log(ele.value.substring(startPosition, endPosition))
          let frontText = ele.value.substring(0, startPosition)
          let endText = ele.value.substring(endPosition)
          let selectedText = ele.value.substring(startPosition, endPosition)
          selectedText = '#*' + selectedText +'#*'
          console.log('selected', selectedText)
          ele.value = frontText + selectedText + endText
        } else {
          alert('000')
        }
      }
    })
    return {
      list,
      ...toRefs(method)
    }
  },
  methods: {
    init(options) {
        $.extend(this, {
            container:null,
            target:null
        }, options);

        this._bindEvent();
    },
    _bindEvent(){
        var self = this;
        if(self.target.length){
            self.container.on('click',function(){
                self._show(self)
            })
        }else {
            self._show(self)
        }
    	
    },
    _test(text){
        var self = this;
        var _text = text;
        var tagList = ['#*','#_','#!','#B','#R','#9','#12','#14','#16','#18'];
        var isHaveList = [];
        var haveErr = false;
        for(var i = 3; i <= text.length; i++ ){
            var tag = text.slice(i-3,i);
            var haveTag = self.findTag(tag);
            tag = haveTag ? haveTag[0] : tag;
            if(tagList.indexOf(tag) !== -1 && isHaveList.indexOf(tag) === -1){
                isHaveList.push(tag);
                i++;
                var reg = new RegExp(tag);
                var style = self._style(tag);
                _text = reg == '/#*/' ? _text.replace(/#\*/,style)  :  _text.replace(reg,style)
            } else if(tagList.indexOf(tag) !== -1 && isHaveList.indexOf(tag) !== -1) {
                if(isHaveList.indexOf(tag) !== isHaveList.length -1){
                    message.error("嵌套重复标签或者数据格式错误")
                    haveErr = true
                    break
                } else {
                    var deleteIndex = isHaveList.indexOf(tag);
                    if (deleteIndex > -1) {
                        isHaveList.splice(deleteIndex, 1);
                    }
                    i++;
                    var reg = new RegExp(tag);
                    _text = reg == '/#*/' ? _text.replace(/#\*/,'</span>')  :  _text.replace(reg,'</span>');
                }
            }
        }
        if(isHaveList.length !== 0 && !haveErr){
            message.error("缺少闭合标签")
            haveErr = true
        }
        if (haveErr) return false
        return _text;
    },
    findTag(matchTag){
        var tagList = ['#*','#_','#!','#B','#R','#9','#12','#14','#16','#18'];
        var searchEnd = false
        tagList.forEach(function(item){
            var reg = new RegExp(item);
            var seaeching = item === '#*' ? matchTag.match('#\\*') : matchTag.match(reg);
            if (seaeching){
                searchEnd = seaeching;
            }
        })
        return searchEnd
    },
    _style(tag){
        var style = '';
        switch (tag){
            case '#*':
                style = '<span style="font-weight:bold;">'
                break
            case '#_':
                style = '<span style="text-decoration:underline;">'
                break
            case '#!':
                style = '<span style="background:yellow;">'
                break
            case '#B':
                style = '<span style="color:blue;">'
                break
            case '#R':
                style = '<span style="color:red;">'
                break
            case '#9':
                style = '<span style="font-size:9pt;">'
                break
            case '#12':
                style = '<span style="font-size:12pt;">'
                break
            case '#14':
                style = '<span style="font-size:14pt;">'
                break
            case '#16':
                style = '<span style="font-size:16pt;">'
                break
            case '#18':
                style = '<span style="font-size:18pt;">'
                break
            default:
                style = false
        }
        return style

    },
    _show(self){
        var text;
        if(self.target.length){
            text = self.target.val();
        }else {
            text = self.container.html();
        }
        text = text.replace(new RegExp("\n",'g'),"</br>");
        var getText = self._test(text);
        text = getText;

        if(!self.target.length){
            self.container.html(text);
            return ;
        }

        // var setRelation = new Window({
        //   title:"预览功能",
        //   actions: [ {
        //     className: "btn-gray J-mask-close",
        //     text: "取消"
        //   }],
        //   content:textAnalusis(text)
        // })
    //     self.setRelation = setRelation;
    //     var targetNode = self.setRelation.node;
    //     self.setRelation.open();
    //     ControlLoader(targetNode);
    //   }
    // })
  }
}
})
</script>

<style lang="scss">
</style>
